<link rel="stylesheet" href="/libs/layui/css/layui.css">
<style>
    .login-form,
    .register-form {
        margin-top: 20px;
        width: 400px;
        height: 280px;
    }
    
    .login-form input,
    .register-form input {
        margin-bottom: 15px;
    }
</style>
<script src="/libs/js/jquery.js"></script>
<script src="/libs/layui/layui.js"></script>
<script src="/libs/js/axios.js"></script>
<script src="/libs/js/myaxios.js"></script>
<div class="register-form">
    <table border="0" cellspacing="20" cellpadding="0" align="center">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" class="txt" width="2" /></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password" class="txt" /></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repassword" class="txt" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" value="注 册" class="reg_sub" /><input type="reset" value="重 置" class="reg_res" /></td>
        </tr>
    </table>
</div>

<script>
    layui.use('layer', function() {
        var layer = layui.layer
            // 完成注册功能
        $('.reg_sub').click(function(e) {
            e.preventDefault()
                // 接收表单数据
            let username = $('input[name="username"]').val().trim();
            let password = $('input[name="password"]').val().trim();
            let repassword = $('input[name="repassword"]').val().trim();
            if (username === '') {
                return layer.msg('用户名不能为空', {
                    icon: 5,
                    time: 3000
                })
            }
            if (password === '') {
                return layer.msg('密码不能为空', {
                    icon: 5,
                    time: 3000
                })
            }
            if (password !== repassword) {
                return layer.msg('两次输入的密码不一致', {
                    icon: 5,
                    time: 3000
                })
            }
            // 调注册的api接口，完成注册功能
            axios({
                method: 'post',
                url: 'api/register',
                data: {
                    username,
                    password,
                    repassword
                }
            }).then(res => {
                console.log(res);
                layer.msg('注册成功，请去登录', {
                    icon: 6,
                    time: 1000
                }, function() {
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭 
                })
            }).catch(err => {
                console.log(err);
                layer.msg(err.response.data.msg, {
                    icon: 5,
                    time: 2000
                }, function() {
                    $('input[name="username"]').val('')
                    $('input[name="password"]').val('')
                    $('input[name="repassword"]').val('')
                })
            })

        })
    })
</script>